<template>
  <div class="send_s">
    <div class="send-header">
      <nav-bar title="发布笔记" left-text="取消" @click-left="onClickLeft" />
    </div>
    <div class="send_img">
      <uploader v-model="fileImg" :after-read="afterRead" multiple />
    </div>
    <div class="notice">
      <input
        v-model="title"
        type="text"
        placeholder="输入标题（一个好的标题更容易上首页哦~）"
      />
      <textarea
        v-model="content"
        cols="30"
        rows="10"
        placeholder="输入笔记内容（添加地点的笔记更容易获得关注哦~）"
      ></textarea>
    </div>
    <div class="send_url">
      <div class="send_url1">
        <icon name="location-o" class="icon-url1" />
        <cell title="添加店/地点" is-link to="send-adress" />
      </div>
      <div class="send_url1">
        <i class="icon-url1">#</i>
        <cell title="添加话题" is-link to="send-topic" />
      </div>
    </div>
  </div>
  <button class="send_btn" @click="notes">发布</button>
</template>
<script setup>
import axios from 'axios'
import { ref } from 'vue'

import { useRouter } from 'vue-router'
import { NavBar, Uploader, Toast, Cell, CellGroup, Icon } from 'vant'
import { notesImgPost, notesPost } from '../services/notes'
const onClickLeft = () => history.back() //取消
const router = useRouter()
const fileImg = ref([]) //照片
const title = ref('') //标题
const content = ref('') //内容
let formData = new FormData()

const afterRead = (file) => {
  //格式转换
  console.log(file.file)
  formData.append('file', file.file)
}
const notes = () => {
  if (title.value && content.value && fileImg.value) {
    // notesImgPost(formData).then((res) => {
    //   fileImg.value = res.data
    //   console.log(res.data)
    // })
    axios({
      url: 'http://47.104.75.203:8080/api/notes/upload/imgs',
      method: 'post',
      data: formData,
      headers: {
        Authorization:
          'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhY2NvdXQiOiIxODUzNzE1MjU2MyIsImV4cCI6MTcyNTI3NzI3NiwiaWF0IjoxNjY1Mjc3Mjc2fQ.u8CY_4c7A2u_9yJe4USbvOGTssk01jjqjTtOv5bfIAE'
      }
    }).then((res) => {
      console.log(res)
      axios({
        url: 'http://47.104.75.203:8080/api/notes/add',
        method: 'post',
        data: {
          title: title.value,
          content: content.value,
          liked: 2432,
          collected: 2345,
          commented: 7859,
          status: 1,
          shopId: 2
        },
        headers: {
          Authorization:
            'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhY2NvdXQiOiIxODUzNzE1MjU2MyIsImV4cCI6MTcyNTI3NzI3NiwiaWF0IjoxNjY1Mjc3Mjc2fQ.u8CY_4c7A2u_9yJe4USbvOGTssk01jjqjTtOv5bfIAE'
        }
      }).then((res) => {
        console.log(res)
        Toast(res.data.msg)
        // 此处需要跳回列表页
        router.push({
          name: 'Home'
        })
      })
    })
  } else {
    Toast('请输入内容')
  }
}
</script>
<style scoped>
html {
  font-size: 13.3vw;
}
body {
  font-size: 0.2rem;
}
.send_s {
  width: 94%;
  margin: 0 auto;
}
.send_img {
  margin-top: 2vh;
}
.notice {
  margin-top: 2vh;
}
input,
textarea {
  border: none;
  outline: none;
  width: 100%;
  /* font-size: 0.28rem; */
  color: #c8c7c7;
}
.notice input {
  height: 2rem;
  font-size: 0.9rem;
  border-bottom: 1px solid #c8c7c7;
}
.notice textarea {
  height: 25vh;
  margin-top: 0.5rem;
  font-size: 0.8rem;
}
.send_url1 {
  display: flex;
  justify-content: space-around;
}
.icon-url1 {
  line-height: 2.6rem;
}
.send_btn {
  border: none;
  background-color: #fe8421;
  border-radius: 2rem;
  height: 2rem;
  width: 80%;
  margin: auto;
  color: white;
  margin-bottom: 2rem;
}
</style>
